<template>
	<view>
		<uni-collapse @change="change">
			<uni-collapse-item title="头痛程度">
				<uni-list>
					<picker class="pickers" @change="bindPickerChange" :value="index" :range="array">
						<uni-list-item title="早上"> </uni-list-item>
						<!--{{array[index]}}  -->
					</picker>
					<picker class="pickers" @change="bindPickerChange" :value="index" :range="array">
						<uni-list-item title="下午"> </uni-list-item>
						<!--{{array[index]}}  -->
					</picker>

					<picker class="pickers" @change="bindPickerChange" :value="index" :range="array">
						<uni-list-item title="晚上"> </uni-list-item>
						<!--{{array[index]}}  -->
					</picker>
					<picker class="pickers" @change="bindPickerChange" :value="index" :range="array">
						<uni-list-item title="睡眠"> </uni-list-item>
						<!--{{array[index]}}  -->
					</picker>
				</uni-list>
			</uni-collapse-item>

			<uni-collapse-item title="就诊记录">
				<uni-list class="list2">
					<view class="texts2">今日是否就诊？</view>
					<switch style="padding-left:50vw;" checked @change="switch1Change" color="rgb(229,55,63)" />
				</uni-list>
			</uni-collapse-item>
			<uni-collapse-item title="可能伴随症状及预兆">

				<uni-list>
					<view class="textsheader3">是否伴有随下列症状？</view>
					<view class="list2">
						<view class="texts2">有恶心的感觉吗？</view>
						<switch checked @change="switch1Change" color="rgb(229,55,63)" />
					</view>
					<view class="list2">
						<view class="texts2">有呕吐吗？</view>
						<switch checked @change="switch1Change" color="rgb(229,55,63)" />
					</view>
					<view class="list2">
						<view class="texts2">对光线敏感吗？</view>
						<switch checked @change="switch1Change" color="rgb(229,55,63)" />
					</view>
					<view class="list2">
						<view class="texts2">对声音敏感吗？</view>
						<switch checked @change="switch1Change" color="rgb(229,55,63)" />
					</view>
					<view class="list2">
						<view class="texts2">头痛感觉像脉搏般一下一下的跳动吗？</view>
						<switch checked @change="switch1Change" color="rgb(229,55,63)" />
					</view>
					<view class="list2">
						<view class="texts2">头痛由单侧开始吗？</view>
						<switch checked @change="switch1Change" color="rgb(229,55,63)" />
					</view>
					<view class="list2">
						<view class="texts2">身体活动会加重头痛吗？</view>
						<switch checked @change="switch1Change" color="rgb(229,55,63)" />
					</view>

					<view class="textsheader3">头痛前会有何预兆出现吗？</view>
					<view class="list2">
						<view class="texts2">眼前出现闪光？</view>
						<switch checked @change="switch1Change" color="rgb(229,55,63)" />
					</view>
					<view class="list2">
						<view class="texts2">部分视野看不见？</view>
						<switch checked @change="switch1Change" color="rgb(229,55,63)" />
					</view>

				</uni-list>

			</uni-collapse-item>


			<uni-collapse-item title="当日头痛时长">
				<uni-list>
					<view class="list2">
						<view class="textsheader4">当日头痛几小时？</view>
						<input class="uni-input" type="number" focus placeholder="请输入小时数" />小时
					</view>
				</uni-list>
			</uni-collapse-item>
			<uni-collapse-item title="用药记录">
				<uni-list>

					<view class="list2">
<view class="textsheader4">妥泰Topamax 25mg</view>
						
						<input class="uni-input" type="number" focus placeholder="请输入数量" />
					</view>
					<view class="list2">
						<view class="texts2">止痛药有效吗？</view>
						<switch checked @change="switch1Change" color="rgb(229,55,63)" />
					</view>
				</uni-list>
			</uni-collapse-item>
			<uni-collapse-item title="月经与不宁腿">
							<uni-list>
								<view class="list2">
									<view class="texts2">是否有不宁腿？</view>
									<switch checked @change="switch1Change" color="rgb(229,55,63)" />
								</view>
							</uni-list>
						</uni-collapse-item>
		</uni-collapse>
		<view class="buttons">
			<button class="mini-btn" type="warn"size="default" @click="getbutton">确定</button>	
					
			<button class="mini-btn" type="default"size="default"  @click="getbutton">取消</button>
			</view>

	</view>
</template>

<script>
	import uniCollapse from '@/components/uni-collapse/uni-collapse.vue'
	import uniCollapseItem from '@/components/uni-collapse-item/uni-collapse-item.vue'
	import uniList from "@/components/uni-list/uni-list.vue"
	import uniListItem from "@/components/uni-list-item/uni-list-item.vue"
	export default {
		components: {
			uniCollapse,
			uniCollapseItem,
			uniList,
			uniListItem
		},
		data() {
			return {
				title: 'picker',

				index: 0,
				array: ["不痛", "小痛", "中痛", "大痛"],


			}
		},
		methods: {
			getbutton(e) {
				uni.navigateTo({
					url:'../index/index'
				})
				
			},
			bindPickerChange: function(e) {
				console.log('picker发送选择改变，携带值为', e.target.value)
				this.index = e.target.value
			},
			switch1Change: function(e) {
				console.log('switch1 发生 change 事件，携带值为', e.target.value)
			},
		}
	}
</script>

<style>
	page {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		background-color: #efeff4;
		min-height: 100%;
		height: auto;
	}

	view {
		font-size: 28rpx;
		line-height: inherit;
	}

	.titleslist {
		display: flex;
		flex-direction: row;
		padding: 4vw;
	}

	.picker {
		width: 60%;
	}

	.texts {
		width: 20vw;
	}

	.texts2 {
		font-size: 4vw;
	}

	.scess-left {
		display: flex;
		flex-direction: row;
	}

	.list2 {
		padding: 4vw;
		display: flex;
		flex-direction: row;
		align-items: center;
		color: #000000;
	}

	.textsheader3 {
		color: rgb(229, 55, 63);
		font-size: 4vw;
		line-height: 12vw;
	}

	.textsheader4 {
		color: rgb(229, 55, 63);
		padding-right: 5vw;
	}
	.textsheader5{
		padding-right: 2vw;
	}
	.buttons{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		}
	.mini-btn{
		margin-top: 5vw;
		width: 70vw;
	}
	</style>
